<template>
  <view>
    <u-navbar title-color="#fff" :is-back="false" :title="tabName" :background="background" />
    <view v-if="isShow">
      <view v-if="dataList.length!==0">
        <view v-if="tabName!==&quot;任务管理&quot;" style="margin-top: 40px;">
          <movable-swiper :data-list="dataList" :height="movHeight">
            <template #default="{movSlotData}">
              <!-- 这里面放你自己的要显示的东西 -->
              <view v-if="movSlotData">
                <view class="first">
                  <span style="flex:1;font-size:10px" @click='back'>上一页</span>
                  <span style="flex:5;text-align:center">第{{ movSlotData.number1 }}/{{ dataList.length }}条</span>
                  <span style="flex:1;font-size:10px" @click='next'>下一页</span>
                </view>
                <view v-if="tableType!==0" class="previewClass" @click="goPreview(movSlotData)">预览</view>
                <view v-for="(item1,index) in header" :key="index" class="content">
                  <view class="contentTitle">{{ item1.title }}:</view>
                  <view class="detail">{{ movSlotData[item1.dataIndex] }}</view>
                </view>
              </view>
            </template>
          </movable-swiper>
        </view>
        <view v-else style="padding:10px">
          <view v-viewer="{movable: false}" style="display:flex;flex-wrap: wrap;">
            <view v-for="item in imglist" :key="item" style="margin-bottom: 10px;">
              <img style="width:calc(25vw);height:100px;margin:0px 10px" :large="item.src" preview="2" :src="item.src">
            </view>
          </view>
        </view>
      </view>
      <view v-else class="noDataClass">
        暂无数据
      </view>
      <PreviewpdfH5 ref="PreviewpdfH5" />
    </view>
    <view v-if="!isShow" style="padding:10px">
      <view style="color: blue;text-decoration: underline;margin-bottom: 15px;" @click="goBack">返回</view>
      <view v-html="content" />
    </view>
  </view>

</template>

<script>
import movableSwiper from '@/components/movable-swiper/movable-swiper.vue';
import PreviewpdfH5 from '@/components/pdf/index.vue';
import { queryHeaderByTableId, getBodyData, getFilePage, getNotice } from '@/api/formview';
import baseUrl from '@/utils/globalUrl.js';
import getRequest from '@/server/getConfig';

export default {
  components: {
    movableSwiper,
    PreviewpdfH5
  },
  data() {
    return {
      isShow: true,
      content: [],
      imglist: [],
      background: {
        backgroundImage: 'linear-gradient(45deg, #3f51b5, #2196f3)'
      },
      tableType: this.$route.query.tableType,
      tabName:this.$route.query.tabName,
      header: [],
      dataList: [],
      movHeight: 'calc(90vh)' // 卡片高度
    };
  },

  created() {
    this.getHeader();
  },
  methods: {
    back(){

    },
    next(){

    },
    goBack() {
      this.isShow = true;
    },
    goPreview(item) {
      if (this.tabName === '公告公示11111' || this.tabName === '巡查管理1111') {
        const status = this.tabName === '公告公示' ? 0 : 1;
        getNotice({
          FORMGUID: item.FORMGUID,
          STATUS: status
        }).then(res => {
          this.isShow = false;
          if (res.success) {
            this.content = res.data.CONTENT;
          } else {
            this.content = [];
          }
        });
      } else {
        this.isShow = true;
        const url = `${baseUrl.globalUrl}/onlinePreview?fileId=${item.FILEID}`;
        if (item.FILETYPE === 'jpg' || item.FILETYPE === 'jpeg' || item.FILETYPE === 'png') {
          window.location.href = url;
        } else {
          this.$refs.PreviewpdfH5.openPdf(url);
        }
      }
    },
    getHeader() {
      queryHeaderByTableId({
        tableId: this.$route.query.tableId
      }).then(res => {
        if (res.success) {
          // res.data.fliter(item => item.display===1)
          this.header = res.data.filter(item => item.display === 1);
          this.header.sort((a, b) => Number(a.orderId) - Number(b.orderId));
        } else {
          this.header = [];
        }
        this.getData();
      });
    },
    getData() {
      getBodyData({
        cprogramname: '',
        filterList: [{ col: 'PROGRAMCODE2', value: this.$route.query.programeCode, Symbol: 'eq' }],
        pageIndex: 0,
        pageSize: 10000,
        pageType: 1,
        tableId: this.$route.query.tableId
      }).then(res => {
        if (res.success) {
          res.data.map((item, index) => {
            item.number1 = index + 1;
          });
          this.dataList = res.data;
          console.log(this.dataList);
        } else {
          this.dataList = [];
        }
        if (this.tabName === '任务管理') {
          this.getFilePage();
        }
      });
    },
    async getFilePage() {
      const BASE_URL = await getRequest();
      getFilePage({
        guid: this.$route.query.programeCode
      }).then(res => {
        if (res.success) {
          res.data.map(o => {
            o.src = `${BASE_URL.data.ApiUrl}/file/downloadById?id=${o.id}&fileName=${o.originName}`;
          });
          this.imglist = res.data;
        } else {
          this.imglist = [];
        }
      });
    }
  }
};

</script>

 <style lang='scss' scoped>
   .first{
     text-align:center;
     height: 45px;
     line-height: 45px;
     display: flex;
   }
    .noDataClass{
      text-align: center;
      font-size: 20px;
      padding-top: 50%;
      color: gray;
    }
    .content{
      display: flex;
      padding: 10px;
      border-bottom: 1px solid #d4d1d1;
      align-items: center;
    }
    .contentTitle{
      flex:1.4;
      font-size: 14px;
    }
    .detail{
      flex:3;
      color: gray;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .previewClass{
      text-align: right;
      padding-right: 5px;
      color: blue;
      font-size: 13px;
      text-decoration: underline;
    }
</style>
